<template>
  <div style="margin-top: 30px;">
    <el-form ref="form" :model="form" label-width="120px" inline :rules="rule" :disabled="!showEd">
      <el-form-item label="作业码头：" v-if="keys.includes('mt')" style="padding: 0" prop="termCode">
        <el-select @change="getVel" clearable style="width: 150px" size="small" 
                   v-model="form.termCode" placeholder="请选择作业码头">
          <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in tips" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船名航次：" v-if="keys.includes('hmh')" style="padding: 0" prop="voyId">
        <el-select @change="voyId" clearable style="width: 150px" size="small" remote :remote-method="getVel1"
                   v-model="form.voyId"  placeholder="搜索查询更多" filterable v-if="showEd">
                   <!-- item.iefg+ -->
          <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"  
                v-for="item,index in shipNo" :key="index"></el-option>         
          <!--:model="form.vslCd" :model="form.vslCd"<el-option  :label="item.cnname" :value="item.cd"  v-for="item,index in shipNo" :key="index"></el-option> -->
        </el-select>
        <el-tooltip :content="form.voyIdName"
                      placement="bottom"
                      popper-class="testtooltip" v-else>
                      <el-select @change="voyId" clearable style="width: 150px" size="small" 
                   v-model="form.voyId"  placeholder="搜索查询更多" filterable  ref="shipNo">
                    <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"  
                          v-for="item,index in shipNo" :key="index"></el-option>         
                    </el-select>
        </el-tooltip>
      </el-form-item>
      <!-- <el-form-item label="船舶名称：" v-if="keys.includes('hmh1')" style="padding: 0" prop="vslCd">
        <el-select @change="voyId1" clearable style="width: 150px" size="small" 
                   v-model="form.vslCd"  placeholder="请选择船舶名称" filterable>      
          <el-option  :label="item.cnname" :value="item.cd"  v-for="item,index in shipNo1" :key="index"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="船舶名称：" v-if="keys.includes('hmh1') && !keys.includes('cddw')" style="padding: 0" prop="vslCd">
        <el-select @change="voyId1" clearable style="width: 150px" size="small" 
                   v-model="form.vslCd"  placeholder="请选择船舶名称" filterable>      
          <!-- <el-option  :label="item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"  v-for="item,index in shipNo1" :key="index"></el-option> -->
          <el-option  :label="item.cnname" :value="item.cd"  v-for="item,index in shipNo1" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船舶名称：" v-if="keys.includes('hmh1') && keys.includes('cddw')" style="padding: 0" >
        <el-select @change="voyId1" clearable style="width: 150px" size="small" 
                   v-model="form.vslCd"  placeholder="请选择船舶名称" filterable>      
          <!-- <el-option  :label="item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"  v-for="item,index in shipNo1" :key="index"></el-option> -->
          <el-option  :label="item.cnname" :value="item.cd"  v-for="item,index in shipNo1" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="贸易类型：" v-if="keys.includes('myl')" style="padding: 0" prop="myl">
        <el-select @change="re" clearable style="width: 150px" size="small" 
                   v-model="form.tradeFlag" placeholder="请选择贸易类型">
          <el-option  :label="item.key+'/'+item.value" :value="item.key"  v-for="item,index in shop" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提单号：" v-if="keys.includes('tdh')" style="padding: 0" prop="tdh">
        <el-input @input="re" clearable style="width: 150px" size="small" 
                  v-model="form.plansExt.billNo" placeholder="请输入提单号"></el-input>
      </el-form-item>
      <!-- <el-divider v-if="keys.includes('hr')"></el-divider> -->
      <!-- <div style="broder-bottom:1px soild #999;width:100%"></div> -->

      <el-form-item label="客户联系方式：" v-if="keys.includes('khlx')">
        <el-input @input="re"  size="small" style="width: 150px"  type="text" v-model="form.customerPhone"  placeholder="请输入客户联系方式"></el-input>
      </el-form-item>
      <el-form-item label="船舶联系方式：" v-if="keys.includes('cblx')">
        <el-input  size="small" type="text" style="width: 150px"  v-model="form.vesselPhone" placeholder="请输入船舶联系方式"></el-input>
      </el-form-item>
      <el-form-item label="结算方式："
                    v-if="keys.includes('jsfs')" style="padding: 0" prop="payMode"  placeholder="请选择结算方式">
        <el-select  v-model="form.payMode" style="width: 150px" size='small' disabled>
          <el-option label="现金" value="XJ"></el-option>
          <el-option label="月结" value="ZD"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="开始时间：" v-if="keys.includes('kssj')" prop="opsttm">
        <el-date-picker
        style="width: 150px" 
            
            format="yyyy-MM-dd HH:mm:ss"
            @change="opsttm"
            v-model="form.opsttm"
            type="datetime"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="流向：" v-if="keys.includes('lx')" prop="plansExt.moveTo" :key="keys.includes('lx')">
        <el-input  size="small" type="text" v-model="form.plansExt.moveTo" style="width: 150px"  placeholder="请输入流向"></el-input>
      </el-form-item>
      <el-form-item label="发货人：" v-if="keys.includes('shf')">
        <el-input  size="small" type="text" v-model="form.plansExt.shipper" style="width: 150px"  placeholder="请输入发货人"></el-input>
      </el-form-item>
      <el-form-item label="收货方：" v-if="keys.includes('shf')">
        <el-input  size="small" type="text" v-model="form.plansExt.recipient" style="width: 150px"  placeholder="请输入收货方"></el-input>
      </el-form-item>
      <el-form-item label="车队单位："
                      v-if="keys.includes('cddw')"
                      prop="cstTrnscomCd">
          <el-select v-model="form.cstTrnscomCd"
                      v-if="showEd"
                      placeholder="请选择车队单位"
                      clearable
                      filterable
                      style="width:150px">
              <el-option v-for="item in dataList.cstTrnscomCd"
                        :key="item.customerCode"
                        :label="item.name"
                        :value="item.customerCode"></el-option>
          </el-select>            
          <el-tooltip v-else :content="cstTrnscomCdList(form).name" placement="bottom" popper-class="testtooltip">
            <el-select v-model="form.cstTrnscomCd"
                      placeholder="请选择车队单位"
                      clearable
                      filterable
                      style="width:150px">
              <el-option v-for="item in dataList.cstTrnscomCd"
                        :key="item.customerCode"
                        :label="item.name"
                        :value="item.customerCode"></el-option>
            </el-select>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="附件："
                    prop="planAttachmentList"
                    style="display:block">
          <uploadImg @set="getFile" ref="myUpload"></uploadImg>
        </el-form-item>
        <div style="width: 100%;display: flex;flex-direction: row-reverse;margin-bottom: 20px;" v-if="keys.includes('bt')&&showEd">
          <el-dropdown  @command="handleCommand" style="background: #0F47B8;color:#fff;
            border-radius: 2px 2px 2px 2px;width: 105px;display: flex;justify-content: center;height: 30px;line-height: 30px;margin-right: 20px;">
            <span class="el-dropdown-link" style="justify-content: center;">
              <span  class="content" ><i class="el-icon-plus"></i>新增货物</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="bts" command="1">散货</el-dropdown-item>
              <el-dropdown-item class="bts" command="2">件杂货</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        
      <el-form-item label="备注：" v-if="keys.includes('bz')">
        <el-input  size="small" type="text" v-model="form.planBulkGoods.remark" style="width: 150px"  placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item label="附件：" v-if="keys.includes('fj')">
          <upload-img ref="upLoad" @set="setFile"></upload-img>
<!--        <el-input  size="small" type="text" v-model="form.planAttachmentList."></el-input>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
import uploadImg from "@/components/uploadImg";
export default {
  name: "formList",
  components:{
    uploadImg
  },
  data(){
    return{
      shipNo:[],
      shipNo1:[],
      stateList:[
        'P:初始',
        'M:待确认',
        'W:待审核',
        'R:审核不通过',
        'A:审核通过',
        'S:下发成功',
        'F:下发失败',
        'Y:已支付',
        'N:取消'
      ],
      shop:[{key:'Y',value:'内贸'},{key:'N',value:'外贸'}],
      tips:[{key:'HX',value:'河西码头'},{key:'LTG',value:'龙头港'}],
      dataList:{
        sell:[],
        consignor:[],
        cstTrnscomCd:[],
        customer:[],
      },
      /*my_normalizer(node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children,
          isDisabled: '' !== node.children
        };
      },*/
      goods:null,
      goodsType:[],
      goodsList:[],
      per:'',
      planTagList:[
        {key:'PFRE',value:'提重返空',},
        {key:'PERF_WC',value:'提空返重（指定箱号）',},
        {key:'PE_WC',value:'提空箱（指定箱号）',},
        {key:'PF',value:'提重箱',},
        {key:'BOX',value:'装箱',},
        {key:'UNBOX',value:'拆箱',}
      ],
      form:{
        payMode:'ZD',
        termCode:'',
        returnTermcd:'HX',
        opsttm:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        opedtm:moment(new Date()).add(7,"days").format('YYYY-MM-DD HH:mm:ss'),
        plansExt:{
          createUser:'',
          recipient:'',
          shipper:'',
          billNo:'',
          moveTo:''
        },
        planBulkGoods:{
          receiverName:'',
          morphology:this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH',
          gtypecd:'',
          planContainerGoods:{},
          gname:'',
          gunit:'',
        },
        planContainerGoods:{
          gcentwg:'',
          gcentpks:''
        },
        isCheck:-1,
        billno:1
      },
      oriForm:{
        payMode:'ZD',
        termCode:'',
        returnTermcd:'HX',
        opsttm:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        opedtm:moment(new Date()).add(7,"days").format('YYYY-MM-DD HH:mm:ss'),
        plansExt:{
          createUser:'',
          recipient:'',
          shipper:'',
          billNo:'',
          moveTo:''
        },
        planBulkGoods:{
          receiverName:'',
          morphology:this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH',
          gtypecd:'',
          planContainerGoods:{},
          gname:'',
          gunit:'',
        },
        planContainerGoods:{
          gcentwg:'',
          gcentpks:''
        },
        isCheck:-1,
        billno:1
      },
      rule:{
          "termCode": [
            { required: true, message: '请选择作业码头', trigger: 'change' }
          ],
          "plansExt.moveTo":[
            { required: true, message: '请输入流向', trigger: ['change','blur'] }
          ],
          "vslCd": [
            { required: true, message: '请选择船舶名称', trigger: 'change' }
          ],
          "voyId": [
            { required: true, message: '请选择船名航次', trigger: 'change' }
          ],
          "payMode": [
            { required: true, message: '请选择结算方式', trigger: 'change' }
          ],
          "opsttm": [
            { required: true, message: '请选择结束时间', trigger: 'change' }
          ],
          "cstTrnscomCd":[
            { required: true, message: '请选择车队单位', trigger: 'change' }
          ],
      }
    }
  },
  props:{
    showEd:{
      default: () => true
    },
    keys: {
      default: () => []
    },
    planTag:{
      default: () => null
    }
  },
  watch:{
    keys(){
      //this.form.planBulkGoods.morphology=this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH'
    },
    form(){
      //console.log(29739174983279)
      if(this.form.termCode){
        if(this.keys.includes('hmh1')){
          this.getShip()
        }else{
          this.getVel1()
        }
      }
    }
  },
  mounted(){
    console.log(this.form.plansExt,'-----------------------------0000');
    
  },
  created() {
    this.getDateList()
  },
  methods:{
    getFile(res) {
      // console.log(666)
      // console.log
      // this.form.planAttachmentList = res
      this.$set(this.form,'planAttachmentList',res)
    },
    myUpdate(){
      this.$forceUpdate
    },
    cstTrnscomCdList(item) {
      let c =  this.dataList.cstTrnscomCd.filter(item1 => item.cstTrnscomCd===item1.customerCode);
      if(c.length>0){
        return c[0]
      }else{
        return {}
      }
    },
    voyId1(id){
      let shipInfo=this.shipNo1.filter(item1 => id===item1.cd)[0]
      console.log(shipInfo)
      this.form.vesselPhone=shipInfo.contactPhone
      this.form.cnname=shipInfo.cnname
      this.$forceUpdate()
      //this.form.plansExt.goodsName =  this.shipNo.filter(item1 => id===item1.id)[0];
      // this.shipNo.forEach(item=>{
      //   if(id === item.id){
      //     //+item.iefg
      //     that.form.cnname=item.cnname
      //     //that.form.customerPhone=item.contactPerson
      //     that.$set(that.form,'vesselPhone',item.contactPhone)
      //     //console.log(that.form.cnname)
      //   }
      // })
    },
    voyId(id){
      let that=this
      console.log(id)
      let shipInfo=this.shipNo.filter(item1 => id===item1.id)[0]
      console.log(shipInfo,'shipInfoshipInfoshipInfoshipInfo')
      that.$set(that.form,'vslCd',shipInfo.vslCode || '')
      if(shipInfo.vessels){
        that.$set(that.form,'vesselPhone',shipInfo.vessels.contactPhone)
        that.$set(that.form,'vslCd',shipInfo.vessels.cd)
        that.$set(that.form,'cnname',shipInfo.vessels.cnname)
        //console.log(that.form)
      }
      if(shipInfo.vslName){
        that.$set(that.form,'cnname',shipInfo.vslName)
      }
      
      // this.form.plansExt.goodsName =  this.shipNo.filter(item1 => id===item1.id)[0];
      // this.shipNo.forEach(item=>{
      //   if(id === item.id){
      //     //+item.iefg
      //     that.form.cnname=item.cnname
      //     //that.form.customerPhone=item.contactPerson
      //     that.$set(that.form,'vesselPhone',item.contactPhone)
      //     //console.log(that.form.cnname)
      //   }
      // })
    },
    handleCommand(v){
      console.log(v)
      this.$emit('add',v)
    },
    setHangS(){
      console.log(333)
      this.$nextTick(()=>{
            this.shipNo.forEach(item=>{
              console.log(222)
              if(this.form.voyId===item.id){
                this.form.voyIdName = item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
              }
            })
      })
    },
    setHang(e){
      if(this.keys.includes('hmh1')){
        this.shipNo.forEach(item=>{
          if(e===item.id){
            this.form.cnname=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
          }
        })
      }
    },
    setFile(res){
      console.log(999)
      console.log(res)
      this.form.planAttachmentList=res
    },
    re(){
      this.$forceUpdate()
    },
    formatToTree(ary, pid) {
      return ary
          .filter((item) =>
              // 如果没有父id（第一次递归的时候）将所有父级查询出来
              // 这里认为 item.parentId === 1 就是最顶层 需要根据业务调整
              pid === undefined ? item.parentType === null : item.parentType === pid
          )
          .map((item) => {
            // 通过父节点ID查询所有子节点
            item.children = this.formatToTree(ary, item.type);
            return item;
          });
    },
    ch(e){
      console.log(e)
      this.goodsList.forEach(item=>{
        if(item.id===e){
          this.form.planBulkGoods.gtypecd=item.type
        }
      })

    },
    getGoods(){
      console.log(88888)
      this.$api.getGoodsType().then(res=>{
        console.log(res.data)
        this.goodsList=res.data
      }).catch()
    },
    getVel(){
      console.log(999)
      //delete this.form.vslCd
      if(this.keys.includes('hmh1')){
        this.getShip()
      }else{
        this.getVel1()
      }
      
    },
    getVel1(val = ''){
      console.log('件散货委托！！！！！！！！！！！！！！！');
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:'BULK_CARGO',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:(this.$route.name == 'jUnloadLift' || this.$route.name == 'jUnloadIn') ?'I':(this.$route.name == 'jLoadLift' || this.$route.name == 'jLoadIn') ?'E':'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
        this.setHangS()
      }).catch()
    },
    getShip(){
      if(this.keys.includes('hmh1') && this.keys.includes('cddw')){
        this.$api.vessles({
          planTagExt:this.planTag,
          termCode:this.form.termCode,
        }).then(res=>{
          this.shipNo1=res.data.data
        }).catch()
      }else{
        this.$api.voyagesVslVoy({
          termCode:this.form.termCode,//码头编码
          schedulesType:'BULK_CARGO',//件散货BULK_CARGO，集装箱CONTAINER
          iefg:(this.$route.name == 'jUnloadLift' || this.$route.name == 'jUnloadIn') ?'I':(this.$route.name == 'jLoadLift' || this.$route.name == 'jLoadIn') ?'E':'',//进出口 进口I,出口E
          something:'',//模糊查询参数
        }).then(res=>{
          this.shipNo1=res.data
        }).catch()
      }

    },
    getDateList(){
      this.$api.term().then(res => {
				this.tips = res.data.data
			})
      
      
      this.$api.customerByType({
        tenantTypeName: '运输公司',
      }).then((res) => {
        this.dataList.cstTrnscomCd = res.data.data
        this.$forceUpdate()
      }).catch()
      // this.$api.voyagesPage({
      //   termCode:'HX',
      //   size:999,
      //   current:0
      // }).then(res=>{
      //   this.shipNo=res.data.records
      // }).catch()
      // this.$forceUpdate()
    },
    opsttm(e){
      console.log(e)
      this.form.opsttm=moment(this.form.opsttm).format('YYYY-MM-DD HH:mm:ss')
    },
    cal(){
      this.$emit('cal')
    },
    sub(){
      this.$emit('sub')
    },
    onSubmit(){

    },
  },
}
</script>

<style scoped lang="scss">
.sub{
  background: #043AA7;
  border-radius: 4px;
}
.cal{
  background: #F9F7F7;
  color: #666;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
}

:deep .el-input__inner {
    height: 32px;
}
.bts{
  width: 65px;
  text-align: center;
}
</style>
